<template>
  <div class="article-manager video-icon" id="shopp-manager">
    <div class="i-layout-page-header">
      <PageHeader class="product_tabs" hidden-breadcrumb>
        <div slot="title">
          <router-link :to="{ path: '/admin/scenic/scenic_list' }"
            ><Button icon="ios-arrow-back" size="small" class="mr20"
              >返回</Button
            ></router-link
          >
          <span
            v-text="$route.query.id ? '编辑景点' : '添加景点'"
            class="mr20"
          ></span>
        </div>
      </PageHeader>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Tabs v-model="currentTab" @on-click="onhangeTab">
        <TabPane label="景点信息" name="1"></TabPane>
        <TabPane label="温馨提示" name="2"></TabPane>
        <TabPane label="景点详情" name="3"></TabPane>
        <TabPane label="信息介绍" name="4"></TabPane>
      </Tabs>
      <Form
        class="formValidate mt20"
        ref="formValidate"
        :rules="ruleValidate"
        :model="formValidate"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <!-- 景点信息 -->
        <Row :gutter="24" type="flex" v-show="currentTab === '1'">
          <Col span="24">
            <FormItem label="景点名称：" prop="scenic_name">
              <Input  v-model="formValidate.scenic_name"  placeholder="请输入景点名称"   v-width="'50%'"  />
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="所属城市：" prop="city_id">
              <Select v-model="formValidate.city_id"  v-width="'50%'" placeholder="请选择城市">
                  <Option v-for="item in cityList" :value="item.city_id" :key="item.city_id">{{ item.city_name }}</Option>
              </Select>
            </FormItem>
          </Col>
           <Col span="24">
            <FormItem label="景点等级：">
              <InputNumber  v-model="formValidate.grade" :min="0" :max="5" placeholder="请输数字"/>            
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="景点地址简写：" prop="short_address_name">
              <Input v-model="formValidate.short_address_name"  placeholder="请输入景点简写地址"  v-width="'50%'"   />
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="景点详细地址：" prop="scenic_address_name">
              <Input v-model="formValidate.scenic_address_name"  placeholder="请输入景点详细地址"  v-width="'50%'"   />
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="景点经纬度：" prop="scenic_address_lat_and_lng">
              <Input    v-model="formValidate.scenic_address_lat_and_lng"    placeholder="请输入景点经纬度"  v-width="'50%'"     />
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="景点联系电话：" prop="scenic_mobile">
              <Input    v-model="formValidate.scenic_mobile"    placeholder="请输入景点联系电话(多个电话请用;分割)"  v-width="'50%'"     />
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="景点特色：" prop="trait">
              <Input v-model="formValidate.trait"  placeholder="例：纵然山水间，悠然心体验"  v-width="'50%'"   />
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="景点简介：" prop="scenic_info">
              <Input v-model="formValidate.scenic_info" type="textarea" :rows="3" placeholder="请输入简介" v-width="'50%'" />
            </FormItem>
          </Col>
           <Col span="24">
            <FormItem label="景点封面图：" prop="image">
              <div class="pictrueBox" @click="modalPicTap('dan', 'danFrom')">
                <div class="pictrue" v-if="formValidate.image">
                  <img v-lazy="formValidate.image" />
                  <Input
                    v-model="formValidate.image"
                    style="display: none"
                  ></Input>
                </div>
                <div class="upLoad acea-row row-center-wrapper" v-else>
                  <Input
                    v-model="formValidate.image"
                    style="display: none"
                  ></Input>
                  <Icon type="ios-camera-outline" size="26" />
                </div>
              </div>
              <div class="tips">(345*345)</div>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="景点轮播图：" prop="slider_image">
              <div class="acea-row">
                <div
                  class="pictrue"
                  v-for="(item, index) in formValidate.slider_image"
                  :key="index"
                  draggable="true"
                  @dragstart="handleDragStart($event, item)"
                  @dragover.prevent="handleDragOver($event, item)"
                  @dragenter="handleDragEnter($event, item)"
                  @dragend="handleDragEnd($event, item)"
                >
                  <img v-lazy="item" />
                  <Button
                    shape="circle"
                    icon="md-close"
                    @click.native="handleRemove(index)"
                    class="btndel"
                  ></Button>
                </div>
                <div
                  v-if="formValidate.slider_image.length < 10"
                  class="upLoad acea-row row-center-wrapper"
                  @click="modalPicTap('duo')"
                >
                  <Icon type="ios-camera-outline" size="26" />
                </div>
                <Input
                  v-model="formValidate.slider_image[0]"
                  style="display: none"
                ></Input>
              </div>
              <div class="tips">(最多10张<br />750*750)</div>
            </FormItem>
          </Col>
        </Row>
        <!-- 景点信息 -->
        <!-- 温馨提示-->
        <Row v-show="currentTab === '2'">
          <Col span="24">
            <FormItem  label="开放时间：" prop="open_time">
              <div  style="margin-bottom:20px" v-for="(item, index) in formValidate.open_time" :key="index" >
                <Input  v-model="item.date"  placeholder="请输入开放日期(例:1月1号~10月-10号)"   v-width="'35%'"  />
                <Input style="margin-left:20px" v-model="item.time"  placeholder="请输入时间段(例:07:00-19:00)"   v-width="'30%'"  />
                <Button style="margin-left:20px" type="error" @click.prevent="removeItem(item)">删除</Button>
              </div>
              <Button type="success"  @click="addItem">新增开放时间</Button>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="开放时间补充说明：">
              <Input v-model="formValidate.open_time_desc" type="textarea" :rows="3" placeholder="请输入补充说明" v-width="'50%'" />
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="优待政策："  prop="special_policy">
              <vue-ueditor-wrap v-model="formValidate.special_policy" @beforeInit="addCustomDialog" :config="myConfig"  style="width: 90%" ></vue-ueditor-wrap>
            </FormItem>
          </Col>
        </Row>
        <!-- 温馨提示 -->
        <!-- 景点详情-->
        <Row type="flex" justify="space-between" v-show="currentTab === '3'">
          <Col span="24">
            <FormItem label="景点详情："  prop="scenic_detail">
              <vue-ueditor-wrap v-model="formValidate.scenic_detail" @beforeInit="addCustomDialog" :config="myConfig3"  style="width: 90%" ></vue-ueditor-wrap>
            </FormItem>
          </Col>
        </Row>
        <!-- 景点详情-->
        <!-- 信息介绍-->
        <Row type="flex" justify="space-between" v-show="currentTab === '4'">
          <Col span="24">
            <FormItem  label="景点设施：">
              <div  style="margin-bottom:20px" v-for="(item, index) in formValidate.scenic_facility" :key="index" >
                <div class="pictrueBox" @click="modalPicTap2(index)">
                  <div class="pictrue" v-if="item.image">
                    <img v-lazy="item.image" />
                    <Input
                      v-model="item.image"
                      style="display: none"
                    ></Input>
                  </div>
                  <div class="upLoad acea-row row-center-wrapper" v-else>
                    <Input
                      v-model="item.image"
                      style="display: none"
                    ></Input>
                    <Icon type="ios-camera-outline" size="26" />
                  </div>
                </div>
                <Input style="margin-left:20px" v-model="item.text"  placeholder="请输入服务设施名称"   v-width="'30%'"  />
                <Button style="margin-left:20px" type="error" @click.prevent="removeItemFac(item)">删除</Button>
              </div>
              <Button type="success" @click="addFac">新增景点设施</Button>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="交通信息：" >
              <vue-ueditor-wrap v-model="formValidate.to_scenic" @beforeInit="addCustomDialog" :config="myConfig"  style="width: 90%" ></vue-ueditor-wrap>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="停车场：" >
              <vue-ueditor-wrap v-model="formValidate.scenic_park" @beforeInit="addCustomDialog" :config="myConfig"  style="width: 90%" ></vue-ueditor-wrap>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="游玩须知：" >
              <vue-ueditor-wrap v-model="formValidate.scenic_help" @beforeInit="addCustomDialog" :config="myConfig"  style="width: 90%" ></vue-ueditor-wrap>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="重要通告：" >
              <vue-ueditor-wrap v-model="formValidate.notice" @beforeInit="addCustomDialog" :config="myConfig"  style="width: 90%" ></vue-ueditor-wrap>
            </FormItem>
          </Col>
        </Row>
        <!-- 信息介绍-->
        <FormItem>
          <Button v-if="currentTab !== '1'" @click="upTab">上一步</Button>
          <Button
            type="primary"
            class="submission"
            v-if="currentTab !== '4'"
            @click="downTab"
            >下一步</Button
          >
          <Button
            type="primary"
            :disabled="openSubimit"
            class="submission"
            @click="handleSubmit('formValidate')"
            v-if="$route.params.id || currentTab === '4'"
            >保存</Button
          >
        </FormItem>
        <Spin size="large" fix v-if="spinShow"></Spin>
      </Form>
      <Modal
        v-model="modalPic"
        width="60%"
        scrollable
        footer-hide
        closable
        title="上传景点图"
        :mask-closable="false"
        :z-index="1"
      >
        <uploadPictures
          :isChoice="isChoice"
          @getPic="getPic"
          @getPicD="getPicD"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          v-if="modalPic"
        ></uploadPictures>
      </Modal>
      <Modal
        v-model="modalPic2"
        width="60%"
        scrollable
        footer-hide
        closable
        title="上传服务设施图"
        :mask-closable="false"
        :z-index="1"
      >
        <uploadPictures
          isChoice="单选"
          @getPic="getPic2"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          v-if="modalPic2"
        ></uploadPictures>
      </Modal>
    </Card>


  </div>
</template>

<script>
// import COS from 'cos-js-sdk-v5'
import { mapState } from "vuex";
import {adminInfoApi} from "@/api/setting"
import uploadPictures from "@/components/uploadPictures";
import VueUeditorWrap from "vue-ueditor-wrap";
import {saveScenicApi,getScenicDetailApi } from "@/api/scenic"

export default {
  name: "scenic_scenicAdd",
  components: {
    uploadPictures,
    VueUeditorWrap
  },
  data() {
    return {
      Id: 0,
      spinShow:false,
      openSubimit: false,
      currentTab: "1",
      cityList: [],
      ruleValidate: {
        scenic_name: [{ required: true, message: "请输入景点名称", trigger: "blur" }],
        city_id: [{required: true,message: "请选择城市",trigger: "change",type: "number"}],
        scenic_mobile: [{required: true,message: "请输入景点联系电话",trigger: "blur"}],
        scenic_info: [{ required: true, message: "请输入简介", trigger: "blur" }],
        image: [{ required: true, message: "请上传景点图", trigger: "change" }],
        slider_image: [{required: true,message: "请上传景点轮播图",type: "array",trigger: "change",}],
        scenic_address_lat_and_lng: [{ required: true, message: "请输入景点经纬度", trigger: "blur" }],
        scenic_address_name: [{ required: true, message: "请输入景点地址", trigger: "blur"}],
        short_address_name: [{ required: true, message: "请输入景点地址简写", trigger: "blur"}],
        trait: [{ required: true, message: "请输入景点特色", trigger: "blur"}],
        open_time: [{ required: true,type:"array", message: "请添加开放时间", trigger: "change" }],
        special_policy: [{ required: true, message: "请输入优待政策", trigger: "blur" }],
        scenic_detail: [{ required: true, message: "请输入景点详情", trigger: "blur" },],

      },
      formValidate: {
        id:0,
        scenic_name: "",
        city_id:'',
        scenic_mobile:'',
        image: "",
        slider_image: [],
        scenic_info:'',
        grade:0,
        scenic_address_lat_and_lng:'',
        scenic_address_name:'',
        short_address_name:"",
        trait:'',
        open_time:[],
        open_time_desc:'',
        special_policy:'',
        scenic_facility:[],
        to_scenic:'',
        scenic_park:'',
        notice:"",
        scenic_help:'',
      },
      isChoice: "",
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      images: [],
      imagesTable: "",
      loading: false,
      modalPic: false,
      modalPic2:false,
      template: false,
      uploadList: [],
      treeSelect: [],
      labelSelect: [],
      picTit: "",
      tableIndex: 0,
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 300, // 初始容器高度
        initialFrameWidth: "70%", // 初始容器宽度
        UEDITOR_HOME_URL: "/admin/UEditor/",
        serverUrl: "",
      },
      myConfig2: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 300, // 初始容器高度
        initialFrameWidth: "100%", // 初始容器宽度
        UEDITOR_HOME_URL: "/admin/UEditor/",
        serverUrl: "",
      },
       myConfig3: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: "100%", // 初始容器宽度
        UEDITOR_HOME_URL: "/admin/UEditor/",
        serverUrl: "",
      },
      manyFormValidate: [],
      facIndex:'',
    };
  },
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : 120;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    },
    labelBottom() {
      return this.isMobile ? undefined : 15;
    },
  },
  created() {

  },
  mounted() {
    this.getAdminInfo()
  },
  methods: {
     // h获取管理员信息
    getAdminInfo(){
      this.$Spin.show()
      adminInfoApi().then((res) => {
          this.cityList = res.data.admin_roles_info
          this.$Spin.hide()
          if(res.status==200&&this.$route.query.id) {
            this.initScenic(this.$route.query.id)
          }
        })
        .catch((error) => {
          this.$Message.error(error.msg)
        });
    },

      // 初始化
     initScenic(id) {
      var that = this
      getScenicDetailApi(id).then(res => {
        res = res.data
        that.Id = res.id
        // that.formValidate = {
        //   scenic_name: res.scenic_name,
        //   city_id:res.city_id,
        //   scenic_mobile:res.scenic_mobile,
        //   image: res.image,
        //   slider_image: res.slider_image,
        //   scenic_info:reds.scenic_info,
        //   grade:res.grade,
        //   scenic_address_lat_and_lng:res.scenic_address_lat_and_lng,
        //   scenic_address_name:res.scenic_address_name,
        //   open_time:res.open_time,
        //   open_time_desc:res.open_time_desc,
        //   special_policy:res.special_policy,
        //   scenic_facility:[],
        //   to_scenic:'',
        //   scenic_park:'',
        //   notice:"",
        //   scenic_help:'',
        // }
        that.formValidate = res
        var city = {}
        that.cityList.forEach(function(item) {
          if (item.city_id === res.city_id) {
            city = item
          }
        })
      }).catch(error => {
          this.$Message.error(error.msg)
      })
    },
     
     // 提交
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.openSubimit = true;
          saveScenicApi(this.formValidate).then(async (res) => {
              this.openSubimit = false;
              this.$Message.success('保存成功')
            })
            .catch((res) => {
              this.openSubimit = false;
              this.$Message.error(res.msg);
            });
        } else {
           this.$Message.warning('请检查必填项');
        }
      });
    },
       // tab切换
    onhangeTab(name) {
      this.currentTab = name;
    },
     // 上一页；
    upTab() {
      this.currentTab = (Number(this.currentTab) - 1).toString();
    },
    // 下一页；
    downTab() {
      this.currentTab = (Number(this.currentTab) + 1).toString();
    },
       // 关闭图片上传模态框
    changeCancel(msg) {
      this.modalPic = false;
    },
      // 点击图
    modalPicTap(tit, picTit, index) {
      this.modalPic = true;
      this.isChoice = tit === "dan" ? "单选" : "多选";
      this.picTit = picTit;
      this.tableIndex = index;
    },
    // 上传服务设施图片
    modalPicTap2(index){
     this.modalPic2 = true;
      this.facIndex = index
    },
    // 获取单张图片信息
    getPic(pc) {
      switch (this.picTit) {
        case "danFrom":
          this.formValidate.image = pc.att_dir;
          break;
        case "danTable":
          this.oneFormValidate[this.tableIndex].pic = pc.att_dir;
          break;
        default:
          this.manyFormValidate[this.tableIndex].pic = pc.att_dir;
      }
      this.modalPic = false;
    },
    // 获取多张图信息
    getPicD(pc) {
      this.images = pc;
      this.images.map((item) => {
        this.formValidate.slider_image.push(item.att_dir);
        this.formValidate.slider_image = this.formValidate.slider_image.splice(
          0,
          10
        );
      });
      this.modalPic = false;
    },
    // 获取单张图片信息
    getPic2(pc) {
      this.formValidate.scenic_facility[this.facIndex].image = pc.att_dir;
      this.modalPic2 = false;
    },
     // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = "move";
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.formValidate.slider_image];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.formValidate.slider_image = newItems;
    },
    addItem() {
      this.formValidate.open_time.push({
        date: '',
        time: '',
      })
    },
      handleRemove(i) {
      this.images.splice(i, 1);
      this.formValidate.slider_image.splice(i, 1);
    },
    removeItem(item) {
      var index = this.formValidate.open_time.indexOf(item)
      if (index !== -1) {
        this.formValidate.open_time.splice(index, 1)
      }
    },
    addFac() {
      this.formValidate.scenic_facility.push({
        image: '',
        text: '',
      })
    },
    
    removeItemFac(item) {
      var index = this.formValidate.scenic_facility.indexOf(item)
      if (index !== -1) {
        this.formValidate.scenic_facility.splice(index, 1)
      }
    },
     // 添加自定义弹窗
    addCustomDialog(editorId) {
      window.UE.registerUI(
        "test-dialog",
        function (editor, uiName) {
          // 创建 dialog
          let dialog = new window.UE.ui.Dialog({
            iframeUrl: "/admin/widget.images/index.html?fodder=dialog",
            editor: editor,
            name: uiName,
            title: "上传图片",
            cssRules: "width:1200px;height:500px;padding:20px;",
          });
          this.dialog = dialog;
          let btn = new window.UE.ui.Button({
            name: "dialog-button",
            title: "上传图片",
            cssRules: `background-image: url(https://cdn.oss.9gt.net/prov1.1/1/icons.png);background-position: -726px -77px;`,
            onclick: function () {
              // 渲染dialog
              dialog.render();
              dialog.open();
            },
          });
          return btn;
        },
        37
      );
      window.UE.registerUI(
        "video-dialog",
        function (editor, uiName) {
          let dialog = new window.UE.ui.Dialog({
            iframeUrl: "/admin/widget.video/index.html?fodder=video",
            editor: editor,
            name: uiName,
            title: "上传视频",
            cssRules: "width:1000px;height:500px;padding:20px;",
          });
          this.dialog = dialog;
          let btn = new window.UE.ui.Button({
            name: "video-button",
            title: "上传视频",
            cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -320px -20px;`,
            onclick: function () {
              // 渲染dialog
              dialog.render();
              dialog.open();
            },
          });
          return btn;
        },
        38
      );
    },
  },
};
</script>
<style scoped lang="stylus">
.list-group {
  margin-left: -8px;
}

.borderStyle {
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
}

.drag {
  cursor: move;
}

.move-icon {
  width: 30px;
  cursor: move;
  margin-right: 10px;
}

.move-icon .icondrag2 {
  font-size: 26px;
  color: #d8d8d8;
}

.maxW /deep/.ivu-select-dropdown {
  max-width: 600px;
}

#shopp-manager .ivu-table-wrapper {
  border-left: 1px solid #dcdee2;
  border-top: 1px solid #dcdee2;
}

.noLeft {
  >>> .ivu-form-item-content {
    margin-left: 0 !important;
  }
}

#shopp-manager .ivu-form-item {
  position: relative;
}

#shopp-manager .ivu-form-item .tips {
  position: absolute;
  color: #999;
  top: 29px;
  left: -77px;
  font-size: 12px;
}

.iview-video-style {
  width: 40%;
  height: 180px;
  border-radius: 10px;
  background-color: #707070;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

.iview-video-style .iconv {
  color: #fff;
  line-height: 180px;
  width: 50px;
  height: 50px;
  display: inherit;
  font-size: 26px;
  position: absolute;
  top: -74px;
  left: 50%;
  margin-left: -25px;
}

.iview-video-style .mark {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.uploadVideo {
  margin-left: 10px;
}

.submission {
  margin-left: 10px;
}

.color-list .tip {
  color: #c9c9c9;
}

.color-list .color-item {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: #fff;
  margin-right: 10px;
}

.color-list .color-item.blue {
  background-color: #1E9FFF;
}

.color-list .color-item.yellow {
  background-color: rgb(254, 185, 0);
}

.color-list .color-item.green {
  background-color: #009688;
}

.color-list .color-item.red {
  background-color: #ed4014;
}

.columnsBox {
  margin-right: 10px;
}

.priceBox {
  width: 100%;
}

.rulesBox {
  display: flex;
  flex-wrap: wrap;
}

.pictrueBox {
  display: inline-block;
}

.pictrueTab {
  width: 40px !important;
  height: 40px !important;
}

.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  display: inline-block;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
}

.upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

.curs {
  cursor: pointer;
}

.inpWith {
  width: 60%;
}

.labeltop {
  >>> .ivu-form-item-label {
    float: none !important;
    display: inline-block !important;
    margin-left: 120px !important;
    width: auto !important;
  }
}

.video-icon {
  background-image: url('https://cdn.oss.9gt.net/prov1.1/1/icons.png'); // cdn.oss.9gt.net/prov1.1/1/icons.png);
  background-color: #fff;
  background-position: -9999px;
  background-repeat: no-repeat;
}
</style>
